import {
  Button,
  Col,
  Divider,
  Empty,
  Form,
  Input,
  Modal,
  Radio,
  Row,
  Select,
  Tooltip,
} from "antd";
import { MyModalProps } from "types/modal";
import { gutter } from "../const/keys";
import { useEffect, useState } from "react";
import { UserAddOutlined } from "@ant-design/icons";
import { addCustomer, getCustomerList } from "@/services/customer";
import { ageGroupOptions, maritalStatusOptions } from "./const";
type Props = MyModalProps & {
  onOk: (user: any) => void;
  defaultValue: any[];
};
const App = (props: Props) => {
  const { onClose = () => {}, onOk = () => {}, defaultValue = [] } = props;
  const [form] = Form.useForm();
  const [customerName, setCustomerName] = useState<string>("");
  const [userList, setUserList] = useState<any[]>([]);
  const getData = async () => {
    const { data, ...rest } = await getCustomerList({
      pageNum: 1,
      pageSize: 20,
      searchValue: customerName,
    });
    setUserList(
      data?.map((item: { id: any }) => {
        const disabled = defaultValue?.some((it) => it.id === item.id);
        return { ...item, disabled };
      })
    );
  };
  useEffect(() => {
    getData();
  }, [customerName]);
  const addUser = async (values: any) => {
    const { data, success } = await addCustomer(values);
    if (success) {
      onClose(true);
      onOk(data);
    }
    console.log(data, success);
  };
  const ok = async () => {
    await form.validateFields();
    const values = form.getFieldsValue();
    let { signTime } = values;
    if (signTime) {
      signTime = signTime.format("YYYY-MM-DD");
    }
    values.signTime = signTime;
    await addUser(values);

    // message.success("还未完成");
  };
  return (
    <Modal
      width={1000}
      open={true}
      onOk={ok}
      onCancel={() => onClose(false)}
      title={`选择/新增客户`}
    >
      <Row wrap={false} gutter={[gutter, gutter]}>
        <Col flex={"300px"}>
          <Row gutter={[gutter, gutter]}>
            <Col span={24}>
              <Input.Search
                allowClear
                value={customerName}
                onChange={(ev) => {
                  setCustomerName(ev.target.value);
                }}
                placeholder="搜索客户"
                onSearch={(ev) => {
                  console.log(ev);
                  setCustomerName(ev);
                }}
              />
            </Col>
            <Col span={24}>
              <Row gutter={[gutter, gutter / 2]}>
                {userList?.length ? null : (
                  <Col span={24}>
                    <Empty />
                  </Col>
                )}
                {userList.map((item) => {
                  return (
                    <Col span={24} key={item.value} style={{}}>
                      <Row align={"middle"}>
                        <Col>
                          <Tooltip
                            title={
                              item.disabled ? "已选择该客户" : "选择该客户"
                            }
                          >
                            <Button
                              icon={<UserAddOutlined />}
                              onClick={() => {
                                if (item.disabled) {
                                  return;
                                }
                                onOk(item);
                              }}
                              disabled={item.disabled}
                              size="small"
                              type="link"
                            >
                              {item.customerName || "未知姓名"}
                            </Button>
                          </Tooltip>
                        </Col>
                        <Col style={{ color: "gray", fontSize: 12 }}>
                          {item.duplicateName}
                        </Col>
                      </Row>
                    </Col>
                  );
                })}
              </Row>
            </Col>
          </Row>
        </Col>
        <Col flex={"auto"}>
          <Form
            form={form}
            labelCol={{
              span: 8,
            }}
          >
            <Row>
              <Col span={12}>
                {/* 姓名 */}
                <Form.Item
                  label="姓名"
                  name="customerName"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input placeholder="请输入姓名" />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 联系方式 */}
                <Form.Item
                  label="联系方式"
                  name="customerPhone"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input placeholder="请输入联系方式" maxLength={11} />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 性别 */}
                <Form.Item label="性别" name="sex">
                  <Radio.Group
                    buttonStyle="solid"
                    block
                    options={[
                      { label: "男", value: 1 },
                      { label: "女", value: 0 },
                      { label: "未知", value: 2 },
                    ]}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 年龄段 50后到00后 */}
                <Form.Item label="年龄段" name="ageGroup">
                  <Select
                    options={ageGroupOptions}
                    placeholder="请选择年龄段"
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 婚姻状况 */}
                <Form.Item label="婚姻状况" name="maritalStatus">
                  <Select
                    options={maritalStatusOptions}
                    placeholder="请选择婚姻状况"
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 子女状况 */}
                <Form.Item label="子女状况" name="childrenStatus">
                  <Input placeholder="请输入子女状况" />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 客户来源 */}
                <Form.Item
                  label="客户来源"
                  name="customerSource"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Select
                    options={[
                      { label: "线上咨询", value: 1 },
                      { label: "展会获客", value: 2 },
                      { label: "转介绍", value: 3 },
                    ]}
                    placeholder="请选择客户来源"
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={22}>
                <Divider />
                选填
              </Col>
              <Col span={12}>
                {/* 防重名 */}
                <Form.Item
                  label="防重名"
                  name="duplicateName"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input placeholder="请输入防重名" />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 单位 */}
                <Form.Item label="单位" name="customerUnit">
                  <Input placeholder="请输入单位名称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 微信号 */}
                <Form.Item label="微信号" name="customerWechat">
                  <Input placeholder="请输入微信号" />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* 备注 */}
                <Form.Item label="备注" name="customerRemark">
                  <Input placeholder="请输入备注" />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
    </Modal>
  );
};
export default App;
